import React, { useContext } from 'react';
import { contextIndex } from '@/pages/index';
import { options } from '../const';
import styles from '../styles.less';

function Item ({
  src,
  name,
  path,
}) {
  const {
    history
  } = useContext(contextIndex)
  const jump = () => {
    if (path) history.push(path)
  }

  return (
    <div 
      className={styles['options-item']}
      onClick={jump}
    >
      <img src={src} alt="icon"/>
      <span>{name}</span>
    </div>
  )
}

export default function OptionBars () {
  return (
    <div className={styles.options}>
      {
        options.map((d, i) => (
          <Item 
            key={i} 
            src={d.url} 
            name={d.name}
            path={d.path}
          />
        ))
      }
    </div>
  )
}